<template>
  <div class="Music_Detail">
    <Header :title="MusicDetail.al.name"><i class="el-icon-arrow-down"
                                            @click="$global.back()"></i></Header>
    <img class="MusicDetail_pic" :src="MusicDetail.al.picUrl"/>
    <el-row class="lyric-contain">
      <el-col :span="23" class="song-lyric" :style="lyricMove">
        <el-row
          v-for="(item,index) in lyric"
          :key="index"
          :style="{'font-size': (index==currentRow ? '1.3rem':'.9rem')}"
          class="lyric-row"
        >{{item.text}}</el-row>
      </el-col>
    </el-row>
    <div class="Detail_player">
      <Player :show-player="true" :show-player-thumb="false"></Player>
    </div>
  </div>
</template>
<script>
import Header from "../../../components/Header";
import {mapState} from "vuex";
import Player from "./player";
export default {
  name: "MusicDetail",
  components: {Player, Header},
  data(){
    return{
      lyricMove:{'top':''},
      lyricCurrent:0,
      currentRow:0
    }
  },
  methods:{
    hide() {
      this.$emit('hide');
    },
  },
  beforeCreate() {
    this.$store.dispatch('audioMusic/MusicDetail',this.$route.params.id)
    this.$store.dispatch('audioMusic/getLyric',this.$route.params.id)
    // this.$store.dispatch('audioMusic/getSongUrl',this.music.musicinfo.id)
  },
  mounted() {
    let _this=this
    this.timer=setInterval(function(){
      _this.lyricCurrent = _this.lyricCurrent +1
    }, 1000);
  },
  computed:{
    ...mapState({
      MusicDetail: state => state.audioMusic.MusicDetail,
      lyric:state=>state.audioMusic.lyric,
      SongUrl:state=>state.audioMusic.SongUrl
    })
  },
  watch: {
    lyricCurrent() {
      this.lyric.forEach((item, index) => {
        if (this.lyricCurrent == item.time) {
          this.lyricMove.top = -index * 2.5 + 6 + "rem";
          this.currentRow = index; //通过比较我们歌词属性里的时间与当前播放时间，来定位到该歌词
        }
      });
    }
  },
}
</script>

<style scoped lang="less">
.Music_Detail{
  width: 100%;
  background: #b3d4fc;
  height: 100%;
}
.MusicDetail_pic{
  width: 500px;
  height: 500px;
  margin: 50px auto;
}
.lyric-contain{
  width: 100%;
  text-align: center;
  right: 0;
  position: relative;
  height: 300px;
  overflow: hidden;
  .song-lyric{
    width: 100%;
position: absolute;

    .lyric-row{

    }
  }
}
.Detail_player{
height: 50px;
  position: absolute;
bottom: 0;
  .player-tab{
    margin: 0 20px;
    display: flex;
    div{
      margin: 0 10px;
    }
  }
}
</style>
